import { getFabAreaSelectOptions, queryFabPillarSelectOptions, queryClassList } from "@/api/modules/fab";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { querySystemSelect } from "@/api/equip/archive";
import { useRouterStoreHook } from "@/store/modules/router";
import { PxScrollbar, PxCheckbox, PxPopover, PxButton } from "px-ui";

/**
 * @description: 获取search配置信息
 * @return {Array<CommonSearch.SearchOption>}
 */
export const useSearchOption = (): Array<CommonSearch.SearchOption> => {
  const tabSearchRouterStore = useRouterStoreHook();
  const className: CommonSearch.SearchOption = {
    label: "科室",
    key: "className",
    value: "",
    defaultValue: tabSearchRouterStore.getClassName || "",
    type: "select",
    relation: "system",
    relationType: "tree-select",
    props: {
      // clearable: tabSearchRouterStore.getSubject === "ALL"
      clearable: tabSearchRouterStore.getClassList?.length > 1
    },
    // axiosApi: queryClassList,
    option: tabSearchRouterStore.getClassList,
    // mapOption: ({ itemName: label, itemValue: value }) => ({ label, value }),
    mapOption: ({ name: label, code: value }) => ({ label, value }),
    relationApi: querySystemSelect,
    getParams: (className: string) => ({ className, factoryArea: "" }),
    relationMapOption: ({ name: label, code: value }) => ({ label, value }),
    placeholder: "请选择科室",
    span: 6
  };

  const system: CommonSearch.SearchOption = {
    label: "系统",
    key: "system",
    value: "",
    type: "tree-select",
    nodeKey: "code",
    treeSelectProps: {
      label: "name",
      children: "children"
    },
    relation: "className",
    relationDefault: true,
    placeholder: "请选择系统",
    span: 6
  };

  const area: CommonSearch.SearchOption = {
    label: "区域",
    key: "area",
    value: "",
    type: "select",
    axiosApi: getFabAreaSelectOptions,
    // mapOption: ({ areaId: value = "", areaCode: label = "" }: any) => ({ value, label }),
    formatOption: (res: Array<any>): Array<any> => {
      return res?.map(({ areaId: value = "", areaCode: label = "" }: any) => ({ value, label }))?.filter(({ value, label }) => !!value && !!label);
    },
    placeholder: "请选择区域",
    span: 6
  };

  const columnPlace: CommonSearch.SearchOption = {
    label: "柱位",
    key: "columnPlace",
    value: "",
    type: "select",
    remote: true,
    selectRemoteApi: queryFabPillarSelectOptions,
    getParams: (space: string) => ({ space }),
    mapOption: ({ space = "" }: any) => ({ value: space, label: space }),
    placeholder: "请选择柱位",
    span: 6
  };

  const eqpId: CommonSearch.SearchOption = {
    label: "机台编号",
    key: "eqpId",
    value: "",
    type: "input",
    placeholder: "请输入机台名称编号",
    span: 6
  };

  return [className, system, area, eqpId, columnPlace];
};

/**
 * @description: 获取table表格的表头（cloumns）信息
 * @return {*}
 */
export const useTableCloumns = (): Array<CommonTable.TableCloumnsType> => {
  return [
    {
      label: "系统",
      prop: "systemName",
      width: 150
    },
    {
      label: "子系统",
      prop: "childSystemName",
      width: 150
    },
    {
      label: "点位",
      prop: "takeOff",
      width: 110
    },
    {
      label: "机台编号",
      prop: "eqpId",
      width: 120
    },
    {
      label: "区域",
      prop: "areaId",
      width: 90
    },
    {
      label: "柱位",
      prop: "columnPlace",
      width: 90
    },
    {
      label: "关注内容",
      prop: "quotaList",
      width: 400,
      render({ row }: any) {
        const { quotaList = [] } = row;
        if (!quotaList?.length) return () => "--";
        // let isShowMore: boolean = quotaList?.length > 2;
        // if (isShowMore && "quotaList_1" in row === false) {
        //   row["quotaList_1"] = quotaList.slice(0, 2);
        //   row["quotaList_2"] = quotaList.slice(2);
        // }
        const getStyleFn = () => {
          return {
            display: "flex",
            alignItems: "center",
            flexWrap: "wrap"
          };
        };

        const getCheckBoxStyleFn = () => {
          return {
            marginRight: "16px"
          };
        };

        return () => (
          <div style={getStyleFn()}>
            {quotaList.map(item => (
              <PxCheckbox style={getCheckBoxStyleFn()} vModel={item.quotaStatus} label={`${item.materialName || ""}-${item.quotaName || ""}`} />
            ))}
          </div>
        );
      }
    }
    // {
    //   label: "关注内容",
    //   prop: "quotaList",
    //   width: 500,
    //   render({ row }: any) {
    //     const { quotaList = [] } = row;
    //     if (!quotaList?.length) return () => "--";
    //     let isShowMore: boolean = quotaList?.length > 2;
    //     if (isShowMore && "quotaList_1" in row === false) {
    //       row["quotaList_1"] = quotaList.slice(0, 2);
    //       row["quotaList_2"] = quotaList.slice(2);
    //     }
    //     const getStyleFn = () => {
    //       return {
    //         display: "flex",
    //         alignItems: "center",
    //         flexWrap: "wrap"
    //       };
    //     };

    //     const getCheckBoxStyleFn = () => {
    //       return {
    //         marginRight: "16px"
    //       };
    //     };

    //     return () =>
    //       isShowMore ? (
    //         <div style={getStyleFn()}>
    //           {row.quotaList_1.map(item => (
    //             <PxCheckbox style={getCheckBoxStyleFn()} vModel={item.quotaStatus} label={`${item.materialName || ""}-${item.quotaName || ""}`} />
    //           ))}
    //           <PxPopover trigger={"click"} popperStyle={{ padding: "10px 16px", width: "auto", maxWidth: "200px" }}>
    //             {{
    //               default: () => (
    //                 <PxScrollbar maxHeight={"200px"}>
    //                   {row.quotaList_2.map(item => (
    //                     <PxCheckbox
    //                       style={getCheckBoxStyleFn()}
    //                       vModel={item.quotaStatus}
    //                       label={`${item.materialName || ""}-${item.quotaName || ""}`}
    //                     />
    //                   ))}
    //                 </PxScrollbar>
    //               ),
    //               reference: () => (
    //                 <PxButton type={"primary"} text={true}>
    //                   更多
    //                 </PxButton>
    //               )
    //             }}
    //           </PxPopover>
    //         </div>
    //       ) : (
    //         <div style={getStyleFn()}>
    //           {quotaList.map(item => (
    //             <PxCheckbox style={getCheckBoxStyleFn()} vModel={item.quotaStatus} label={`${item.materialName || ""}-${item.quotaName || ""}`} />
    //           ))}
    //         </div>
    //       );
    //   }
    // }
  ];
};
